<template>
    <div class="show-pc PageWidth">
        <div class="works_container">
            <div class="works_item">
                <div class="content_left">
                    <div>
                        <sshbImage :width="100" :height="100" :src="userImg"
                            style="border-radius: 4px; border-radius: 50%;"></sshbImage>
                    </div>
                    <div class="userName">重庆幺皇</div>
                    <div class="userText">
                        <span>重庆项目</span>
                        <span>设计部</span>
                    </div>
                    <div class="button">
                        已关注
                    </div>
                </div>
                <div class="content_right">
                    <div class="worksimg" v-for="item in list" :key="item">
                        <sshbImage :width="340" :height="240" :src="item.imgurl" style="border-radius: 10px;  ">
                        </sshbImage>
                    </div>


                </div>
                <div class="more_btn">
                    <div class="text_btn">查看更多</div>
                </div>

            </div>
        </div>
    </div>
    <div class="show-wap">
        <div class="works_container-wap">
            <div class="works_item-wap">
                <div class="content_left-wap">
                    <div>
                        <sshbImage :width="300" :height="300" :src="userImg"
                            style="border-radius: 4px; border-radius: 50%;"></sshbImage>
                    </div>
                    <div style="display: grid; gap: 8px;">
                        <div class="userName-wap">重庆幺皇</div>
                        <div class="userText-wap">
                            <span>重庆项目</span>
                            <span>设计部</span>
                            <div class="button-wap">
                                已关注
                            </div>
                        </div>

                    </div>

                </div>
                <div class="content_right-wap">

                    <div class="works-container">
                        <div class="worksimg-wap" v-for="item in list" :key="item">
                            <sshbImage :width="1100" :height="600" :src="item.imgurl" style="border-radius: 10px;">
                            </sshbImage>
                        </div>
                    </div>

                    <div class="more_btn-wap">
                        <div class="text_btn-wap">查看更多</div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</template>

<script setup>
import sshbImage from '@/sshbComponents/sshbImage/index.vue';
import userImg from "../../assets/images/local_img/userInfo.jpg"


import img_3 from "../../assets/images/local_img/img_3.png"

import img_6 from "../../assets/images/local_img/img_6.png"

import img_8 from "../../assets/images/local_img/img_8.png"

import img_10 from "../../assets/images/local_img/img_10.png"


const list = ref([
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    },
    {
        imgurl: img_3,
        text: "图片5",
        name: "作家"
    },

])

</script>

<style lang="less" scoped>
.works_container {

    margin: 0 auto;

    box-sizing: border-box;

    .works_item {
        width: auto;
        height: 16vw;
        margin-top: 60px;
        background-color: var(--color-bg-20);
        border-radius: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;





        .content_left {

            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;


            .userName {
                font-size: 0.83vw;
                color: var(--color-text);
            }

            .userText {
                font-size: 0.72vw;
                color: var(--color-text);
                display: flex;
                gap: 10px;
            }

            .button {

                width: 5.20vw;
                height: 2.08vw;
                text-align: center;
                line-height: 2.08vw;
                background-color: rgb(110, 110, 110);
                color: rgb(255, 255, 255);
                border-radius: 10px;
                font-size: 0.72vw;
                cursor: pointer;
                transition: background-color 0.3s;

                &:hover {
                    background-color: rgb(90, 90, 90);
                }
            }


        }

        .content_right {
            // flex: 1;
            display: flex;
            gap: 0.6vw;


        }

        .more_btn {

            width: 3.12vw;
            height: 13.5vw;
            background-color: var(--color-bg-3b);
            font-size: 0.93vw;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;


            .text_btn {
                writing-mode: vertical-rl;
                text-orientation: mixed;
                letter-spacing: 5px;
                color: var(--color-text);
            }
        }



    }
}

// 手机

.works_container-wap {
    width: 100%;
    margin: 0 auto;
    // padding: 0 20px;
    box-sizing: border-box;


    .works_item-wap {
        width: 100%;
        // height: 80vh;


        margin-top: 20px;
        background-color: var(--color-bg-20);
        border-radius: 10px;
        // display: flex;
        // justify-content: space-around;

        // align-items: center;



        padding: 10px;

        .content_left-wap {
            display: flex;
            gap: 16px;


            .userName-wap {
                font-size: 18px;
                color: var(--color-text);
            }

            .userText-wap {
                font-size: 16px;
                color: var(--color-text);

                display: flex;
                justify-content: center;
                align-items: center;
                gap: 20px;
            }

            .button-wap {

                width: 80px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: rgb(110, 110, 110);
                color: rgb(255, 255, 255);
                border-radius: 10px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s;

                // &:hover {
                //     background-color: rgb(90, 90, 90);
                // }
            }


        }

        .content_right-wap {
            // flex: 1;
            // display: flex;
            // gap: 1.71vw;
            margin-top: 10px;

            .works-container {
                display: flex;
                overflow-x: auto;
                scrollbar-width: none;

                padding: 10px 0;
                width: 100%;
            }

            .works-container::-webkit-scrollbar {
                display: none;

            }

            .worksimg-wap {
                flex: 0 0 auto;

                margin-right: 15px;

            }

            .worksimg-wap:last-child {
                margin-right: 0;

            }

            .more_btn-wap {

                width: 100%;
                height: 50px;
                margin: 0 auto;
                background-color: var(--color-bg-3b);
                font-size: 16px;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: background-color 0.3s;
                letter-spacing: 4px;
                // &:hover {
                //     background-color: rgb(230, 232, 232);
                // }

                // .text_btn-wap {
                //     writing-mode: vertical-rl;
                //     text-orientation: mixed;
                //     letter-spacing: 5px;
                //     color: var(--color-text);
                // }
            }
        }



    }
}
</style>